import React, { ButtonHTMLAttributes, ClassAttributes } from 'react';
import _ from 'lodash';
import classNames from 'classnames';


let buttonSeq = 0;

const nextButtonId = (): string => 'btn' + (buttonSeq++);

interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ClassAttributes<HTMLButtonElement> {
    value?: string,
    icon?: string,
}

const Button_ = (props: Readonly<IButtonProps>): JSX.Element => {
    const onClick = (evt: React.MouseEvent<HTMLButtonElement>) => props.onClick && props.onClick(evt);
    return <button id={nextButtonId()} {...props} className={classNames(props.className)} onClick={onClick}>
        {props.icon && <i className={classNames(props.icon, 'icon')} />}{props.value}
    </button>
};
Button_.defaultProps = {
    type: 'button',
    className: 'ui button',
    value: '',
    icon: '',
    onClick: (evt: React.MouseEvent<HTMLButtonElement>): void => console.warn('Button', evt.target, 'clicked but unhandled!'),
};

const Button = React.memo(Button_);

/**
 * 提交按钮
 * @param props 按钮的属性。
 */
const SubmitButton_ = (props: Readonly<IButtonProps>): JSX.Element =>
    <Button_ type="submit" {...props} value="提交" icon="check" />;

/**
 * 登录按钮
 * @param props 按钮的属性。
 */
const LoginButton_ = (props: Readonly<IButtonProps>): JSX.Element =>
    <Button_ type="submit" {...props} value="登录" icon="key" />;

/**
 * 搜索按钮
 * @param props 按钮的属性。
 */
const SearchButton_ = (props: Readonly<IButtonProps>): JSX.Element =>
    <Button_ type="submit" {...props} value="查询" icon="search" />;

/**
 * 保存按钮
 * @param props 按钮的属性。
 */
const SaveButton_ = (props: Readonly<IButtonProps>): JSX.Element =>
    <Button_ type="submit" {...props} value="保存" icon="save" />;

/**
 * 查看明细按钮
 * @param props 按钮的属性。
 */
const DetailButton_ = (props: Readonly<IButtonProps>): JSX.Element =>
    <Button_ type="button" {...props} value="明细" icon="file alternate" />;

/**
 * 修改按钮
 * @param props 按钮的属性。
 */
const ModifyButton_ = (props: Readonly<IButtonProps>): JSX.Element =>
    <Button_ type="button" {...props} value="修改" icon="edit" />;

/**
 * 回退按钮
 * @param props 按钮的属性。
 */
const BackButton_ = (props: Readonly<IButtonProps>): JSX.Element =>
    <Button_ type="button" {...props} value="返回" icon="backward" />;

const SubmitButton = React.memo(SubmitButton_);
const LoginButton = React.memo(LoginButton_);
const SearchButton = React.memo(SearchButton_);
const SaveButton = React.memo(SaveButton_);
const DetailButton = React.memo(DetailButton_);
const ModifyButton = React.memo(ModifyButton_);
const BackButton = React.memo(BackButton_);

export { Button, SubmitButton, LoginButton, SearchButton, SaveButton, DetailButton, ModifyButton, BackButton };